<template>
  <el-container>
    <el-header class="header" :class="topsrcoll ? 'top' : ''">
      <el-menu
        :default-active="activeIndex"
        class="menu"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        active-text-color="var(--default-primary)"
      >
        <div class="logo" v-wave>
          <img class="logo-1" src="/src/assets/images/logo/logo.png" />
          <img class="logo-2" src="/src/assets/images/logo/logo-jinjia.png" />
        </div>

        <div class="flex-grow" />
        <el-menu-item index="home" v-wave>首页</el-menu-item>
        <el-menu-item index="honor" v-wave>荣誉获奖</el-menu-item>
        <el-menu-item index="projects" v-wave>项目作品</el-menu-item>
        <el-menu-item index="members" v-wave>师生风采</el-menu-item>
        <el-menu-item index="cooperation" v-wave>校企合作</el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="contact" class="contact" v-wave
          >联系我们</el-menu-item
        >
      </el-menu>
    </el-header>
    <!-- 内容主体 -->
    <el-main>
      <!-- 首页内容 -->
      <section class="content" id="home" ref="home">
        <div
          class="home_left"
          data-aos="fade-right"
          data-aos-easing="ease-in-sine"
        >
          <div class="home_logo" v-wave>
            <img
              class="image"
              src="/src/assets/images/home/logo-all.png"
              alt=""
            />
          </div>
          <div id="introduce">
            <p v-wave>
              以立德树人为根本任务，以提高技术技能水平为目标，以技能竞赛和横向
              项目为主要抓手，以具体工作任务为驱动，着重培养学员团队协作意识和
              精益求精的工匠精神。
            </p>
            <el-button color="var(--default-primary)" size="large" v-wave>
              了解更多工坊信息
              <svg
                style="width: 20px; height: 20px"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
                ></path></svg
            ></el-button>
          </div>
        </div>

        <div class="home_right">
          <div id="lottie_box"></div>
        </div>
      </section>
      <!-- 荣誉奖项 -->
      <section class="content" id="honor" ref="honor">
        <my-title maintitle="荣誉获奖" subtitle="Honorary Award"></my-title>
        <!-- 荣誉喜报 -->
        <el-scrollbar class="honors" :noresize="false">
          <div class="scrollbar-flex-content">
            <div
              v-for="item in HonorsAndCertificates.honors"
              :key="item.img"
              class="scrollbar-item"
            >
              <el-card data-aos="fade-left">
                <el-image
                  style="width: 450px; height: 270px"
                  :src="item.img"
                  fit="cover"
                  v-wave
                  v-viewer
                />
                <p v-wave>{{ item.content }}</p>
                <el-button
                  style="align-self: flex-start"
                  color="var(--default-primary)"
                  size="default"
                  v-wave
                  >国家级</el-button
                ></el-card
              >
            </div>
          </div>
        </el-scrollbar>
        <!-- 指示器 -->
        <!-- <center><div style="height: 100px">指示器</div></center> -->
        <br />
        <br />
        <!-- 证书墙 -->
        <div style="position: relative">
          <!-- 左右按钮 -->
          <el-button class="btn_left" color="#fff"
            ><el-icon><ArrowLeft /></el-icon
          ></el-button>
          <el-button class="btn_right" color="var(--default-primary)"
            ><el-icon><ArrowRight /></el-icon
          ></el-button>
          <!-- 滚动视口 -->
          <el-scrollbar class="certificate">
            <div class="scrollbar-flex-content">
              <div
                v-for="item in HonorsAndCertificates.certificates"
                :key="item.img"
                class="scrollbar-item"
                data-aos="fade-left"
              >
                <el-image
                  style="height: 180px"
                  :src="item.img"
                  fit="cover"
                  v-wave
                  v-viewer
                />
              </div>
            </div>
          </el-scrollbar>
        </div>
      </section>
      <!-- 项目作品 -->
      <section class="content" id="projects" ref="projects">
        <my-title maintitle="项目作品" subtitle="Project works"></my-title>

        <el-carousel
          indicator-position="outside"
          height="640px"
          :pause-on-hover="true"
        >
          <el-carousel-item v-for="item in projects" :key="item.img">
            <div
              class="card"
              shadow="never"
              style="width: 100%; height: 100%; border-radius: 0; opacity: 1"
            >
              <el-image
                style="width: 860px; height: 480px"
                :src="item.img"
                fit="cover"
              />
              <div class="introduce">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>

                <el-button
                  v-for="i in item.label"
                  :key="i"
                  color="var(--default-primary)"
                  size="default"
                  v-wave
                  >{{ i }}</el-button
                >
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </section>
      <!-- 师生风采 -->
      <section class="content" id="members" ref="members">
        <my-title maintitle="师生风采" subtitle="Elegant demeanour" />
        <el-scrollbar class="members" :noresize="false">
          <div class="scrollbar-flex-content">
            <div v-for="item in members" :key="item.img" class="scrollbar-item">
              <el-card data-aos="fade-left">
                <el-image
                  style="width: 400px; height: 380px"
                  :src="item.img"
                  fit="cover"
                />

                <el-button
                  style="margin-top: 10px"
                  color="var(--default-primary)"
                  size="default"
                  >{{ item.name }}</el-button
                >
                <p>{{ item.introduce }}</p></el-card
              >
            </div>
          </div>
        </el-scrollbar>
      </section>
      <!-- 校企合作 -->
      <section class="content" id="cooperation" ref="cooperation">
        <my-title maintitle="校企合作" subtitle="Cooperation" />
        <div class="up">
          
          <el-card v-for="item in cooperation.cooperation" style="width: 530px; height: 370px" data-aos="fade-left">
            <div class="title">
              <el-image
                style="width: 64px; height: 64px"
                :src="item.icon"
                fit="cover"
              >
              </el-image>
              <h2>{{ item.title }}</h2>
            </div>
            <p>
              {{item.content}}
            </p>
          </el-card>
          
        </div>
        <my-title maintitle="合作企业" subtitle="Cooperative enterprises" />
        <div class="bottom">
          <el-card v-for="item in cooperation.enterprise" v-wave data-aos="zoom-in-up">
            <p>{{item}}</p>
          </el-card>
        </div>
      </section>
      <!-- 联系我们 -->
      <section class="content" id="contact" ref="contact">
        <my-title
          style="z-index: 10; position: relative"
          maintitle="联系我们"
          subtitle="Contact us"
        />
        <center>
          <el-image
            style="width: 1300px; height: 600px; z-index: 2"
            src="/src/assets/images/contact/contact.png"
            fit="cover"
            data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="1000"
          >
          </el-image>
        </center>
        <!-- Contact us 背景图 -->
        <el-image
          fit="contain"
          style="
            width: 1500px;
            height: 1500px;
            position: absolute;
            bottom: -170px;
            left: -500px;
            z-index: 1;
          "
          data-aos="fade-right"
          data-aos-offset="300"
          data-aos-easing="linear"
          data-aos-duration="1000"
          src="/src/assets/images/contact/bg.png"
        ></el-image>
      </section>
    </el-main>
    <!-- 回到顶部 -->
    <el-backtop :right="72" :bottom="100" v-wave> ↑ </el-backtop>
    <!-- footer -->
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import { ref } from 'vue';
import './assets/theme.css';
import lottie from 'lottie-web';
import MyTitle from './components/MyTitle.vue';
import { ArrowLeft, ArrowRight, ArrowUp } from '@element-plus/icons-vue';
// 引入外部数据
import HonorsAndCertificates from '/src/assets/conf/data/HonorsAndCertificates.js';
import Projects from '/src/assets/conf/data/Projects.js';
import Members from '/src/assets/conf/data/Members.js';
import Cooperation from '/src/assets/conf/data/Cooperation.js';

export default {
  data() {
    return {
      activeIndex: '1',
      lottie: null,
      HonorsAndCertificates: HonorsAndCertificates,
      projects: Projects,
      members: Members,
      cooperation: Cooperation,
      scrollTop: ref(''),
      topsrcoll: ref(false),
    };
  },
  methods: {
    handleSelect(key) {
      key = '#' + key;
      console.log(key);
      console.log(this.$el.querySelector(key));
      this.$el
        .querySelector(key)
        .scrollIntoView({ block: 'center', behavior: 'smooth' });
    },
  },
  mounted() {
    this.lottie = lottie.loadAnimation({
      container: document.getElementById('lottie_box'),
      renderer: 'svg',
      loop: true,
      path: 'https://assets6.lottiefiles.com/private_files/lf30_m8xedr1v.json',
    });
    this.lottie.play();
    // 监听滚动条
    window.addEventListener('scroll', () => {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    });
    console.log(projects);
  },
  components: {
    MyTitle,
    ArrowLeft,
    ArrowRight,
    ArrowUp,
  },
  watch: {
    scrollTop(newValue, oldValue) {
      // 等新值大于100的时候再做变化（优化一下）
      console.log(newValue, oldValue);
      // 等新值大于100的时候再做变化（优化一下）
      if (newValue > 100) {
        if (newValue > oldValue) {
          console.log('向下滚动');
          this.topsrcoll = true;
        } else {
          console.log('向上滚动');
          this.topsrcoll = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 收起导航栏
.top {
  transform: translateY(-100px);
}
.header {
  transition: all 0.5s;
  // 固定定位
  position: fixed;
  z-index: 100;
  // 宽度100%
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: #fff;
  // 盒子投影0.16
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  .el-menu--horizontal {
    // 去除下划线
    border-bottom: none;
  }
  // 菜单项样式
  .el-menu-item {
    font-size: 24px;
    margin-left: 20px;
    margin-right: 22px;
    padding-left: 4px;
    padding-right: 4px;
    height: 56px;
    font-weight: 300;
    width: 120px;
  }
  // 选中的菜单项样式
  .is-active {
    font-size: 28px;
    font-weight: 400;
    border-radius: 0 !important;
    background-color: #fff !important;
  }
  .menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85vw;
    height: 72px;

    .logo {
      width: 190px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo-1 {
        width: 72px;
        height: 72px;
      }
      .logo-2 {
        height: 56px;
      }
    }
    .contact {
      background-color: var(--default-primary);
      border-radius: 4px;
      color: #fff;
      height: 56px;
      width: 132px;
    }
  }
  // 弹性间隔
  .flex-grow {
    flex-grow: 1;
  }
}
.content {
  height: 100vh;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 100px;
  box-sizing: border-box;
}
.el-main {
  padding: 0;
}
// 首页
#home {
  display: flex;
  align-items: center;
  justify-content: space-around;
  .home_left {
    width: 50vw;
    .home_logo {
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }
    #introduce {
      padding: 0px 40px 10px;
      // 华文宋体
      font-family: 'STSong';
      font-size: 20px;
      p {
        margin-bottom: 20px;
        font-size: 20px;
        color: #707070;
        // 行间距
        line-height: 36px;
      }
      .el-button {
        justify-self: flex-start;
        // 华文宋体
        font-family: 'STSong';
        color: #fff;
        font-size: 20px;
      }
    }
  }
  .home_right {
    width: 50vw;
    // width: 50%;
    // height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    #lottie_box {
      width: 950px;
      // height: 720px;
    }
  }
}
// 荣誉获奖
#honor {
  background-color: #fffafd;
  .honors {
    height: 460px;

    .scrollbar-flex-content {
      display: flex;
      // 贴合滚动三件套
      overflow: auto;
      scroll-snap-type: x mandatory;

      .scrollbar-item {
        scroll-snap-align: start;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 480px;
        height: 450px;
        padding: 5px 20px;
        border-radius: 4px;
        // background-color: #fff;

        .el-image {
          border-radius: 10px;
          box-sizing: border-box;
          vertical-align: top;
        }
        p {
          width: 450px;
          color: #454545;
          font-size: 20px;
          font-weight: 300;
        }
      }
    }
  }

  .btn_left {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: -72px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  }
  .btn_right {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    right: -72px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  }
  .certificate {
    height: 180px;
    .scrollbar-flex-content {
      display: flex;
      // 贴合滚动三件套
      overflow: auto;
      scroll-snap-type: x mandatory;
      ::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-item {
        scroll-snap-align: start;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 180px;
        padding: 0px 20px;
        // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

        border-radius: 4px;
        // 移除背景色
        // background-color: #fff;
      }
    }
  }
}

// 项目作品
:deep(#projects) {
  background-color: #faf8fd;
  .card {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    .el-image {
      width: 860px;
    }
    .introduce {
      width: 650px;
      h2 {
        font-size: 48px;
        // 黑体
        font-family: 'SimHei';
        font-weight: 400;
      }
      p {
        font-size: 32px;
        // 华文宋体
        font-family: 'STSong';
        color: #707070;
        font-weight: 300;
        line-height: 56px;
      }
    }
  }
  .el-carousel__indicator--horizontal {
    .el-carousel__button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
  }
  .el-carousel {
    .el-carousel__container {
      .el-carousel__arrow {
        background-color: var(--default-primary);
        width: 32px;
        height: 32px;
        border-radius: 12px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      }
    }
    .el-carousel__indicators {
      // 指示器
      // left: unset;
      // transform: unset;
      // right: 2%;
      button {
        background-color: #c6c6c6;
      }
      .is-active button {
        background-color: red;
        opacity: 1;
      }
    }
    .el-carousel__button {
      // 指示器按钮
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.2);
    }
    button {
      background-color: var(--default-primary);
    }
  }
}
// 师生风采
#members {
  background-color: #f9fff6;
  .members {
    
    height: 620px;
    .scrollbar-flex-content {
      // 贴合滚动三件套
      overflow: auto;
      scroll-snap-type: x mandatory;
      ::-webkit-scrollbar {
        display: none;
      }
      display: flex;
      :deep(.el-card__body) {
        // 贴合起始位置
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .scrollbar-item {
        scroll-snap-align: start;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 420px;
        height: 610px;
        padding: 5px 20px;
        border-radius: 4px;

        .el-image {
          border-radius: 10px;
          box-sizing: border-box;
          vertical-align: top;
        }
        p {
          // width: 450px;
          color: #454545;
          font-size: 20px;
          font-weight: 300;
        }
      }
    }
  }
}
// 校企合作
:deep(#cooperation) {
  background-color: #fffaff;
  .up {
    display: flex;
    justify-content: space-between;
    .el-card {
      .title {
        display: flex;
        .el-image {
          display: inline-block;
        }
        h2 {
          margin: 0 0 0 20px;
          font-size: 36px;
          line-height: 64px;
          font-weight: 400;
          // 圆体
          font-family: 'SimSun';
          display: inline-block;
        }
      }
      p {
        font-size: 32px;
        line-height: 48px;
        font-weight: 300;
      }
    }
  }
  .bottom {
    // grid布局 3列
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    .el-card {
      border-radius: 12px;
      display: flex;
      justify-self: center;
      align-items: center;
      width: 489px;
      height: 105px;
      .el-card__body {
        width: 100%;
      }
      p {
        text-align: center;
        width: 100%;
        font-size: 32px;
        line-height: 45px;
        font-weight: 300;
      }
    }
  }
}
// 联系我们
#contact {
  overflow: hidden;
  background-color: #fffeff;
  position: relative;
}
// 回到顶部
.el-backtop {
  background-color: var(--default-primary);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  color: #fff;
  width: 56px;
  height: 56px;
  font-size: 24px;
  font-weight: bold;
}
</style>
